<!--
创建一个待办事项列表，实现以下功能：
输入框中输入内容，点击 "添加" 按钮可新增待办项
每个待办项后面有 "删除" 按钮，点击可删除该项
点击待办项文本可切换完成状态（添加删除线样式）
底部显示当前待办项数量统计
-->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2：动态待办列表</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        .todo-container {
            max-width: 600px;
            margin: 3rem auto;
            padding: 0 1rem;
        }

        .todo-header {
            text-align: center;
            margin-bottom: 2rem;
            color: #333;
        }

        .add-todo {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .todo-input {
            flex: 1;
            padding: 0.8rem 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        .todo-input:focus {
            border-color: #2563eb;
        }

        .add-btn {
            padding: 0.8rem 1.5rem;
            background-color: #22c55e;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .add-btn:hover {
            background-color: #16a34a;
        }

        .todo-list {
            list-style: none;
            gap: 0.8rem;
            display: flex;
            flex-direction: column;
        }

        .todo-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: background-color 0.3s;
        }

        .todo-item:hover {
            background-color: #f9fafb;
        }

        .todo-text {
            font-size: 1rem;
            color: #333;
            cursor: pointer;
            transition: color 0.3s;
        }

        /* 完成状态样式 */
        .todo-text.completed {
            color: #6b7280;
            text-decoration: line-through;
        }

        .delete-btn {
            padding: 0.5rem 0.8rem;
            background-color: #ef4444;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .delete-btn:hover {
            background-color: #dc2626;
        }

        .todo-count {
            margin-top: 1.5rem;
            text-align: right;
            font-size: 0.9rem;
            color: #6b7280;
        }
    </style>
</head>
<body>
    <div class="todo-container">
        <h1 class="todo-header">待办事项列表</h1>

        <!-- 添加待办区域 -->
        <div class="add-todo">
            <input type="text" class="todo-input" id="todoInput" placeholder="请输入待办事项...">
            <button class="add-btn" id="addTodoBtn">
                <i class="fa fa-plus"></i> 添加
            </button>
        </div>

        <!-- 待办列表 -->
        <ul class="todo-list" id="todoList"></ul>

        <!-- 数量统计 -->
        <div class="todo-count" id="todoCount">
            当前待办数量：0
        </div>
    </div>

    <script>
        // 获取DOM元素
        const todoInput = document.getElementById('todoInput');
        const addTodoBtn = document.getElementById('addTodoBtn');
        const todoList = document.getElementById('todoList');
        const todoCount = document.getElementById('todoCount');

        // 存储待办事项的数组
        let todos = [];
        let todoId = 0;

        // 更新待办事项数量显示
        function updateTodoCount() {
            const count = todos.length;
            todoCount.textContent = `当前待办数量：${count}`;
        }

        // 创建新的待办事项
        function createTodoItem(text) {
            const todo = {
                id: todoId++,
                text: text,
                completed: false
            };

            todos.push(todo);
            renderTodoList();
            updateTodoCount();
        }

        // 删除待办事项
        function deleteTodo(id) {
            todos = todos.filter(todo => todo.id !== id);
            renderTodoList();
            updateTodoCount();
        }

        // 切换待办事项完成状态
        function toggleTodoStatus(id) {
            todos = todos.map(todo => {
                if (todo.id === id) {
                    return { ...todo, completed: !todo.completed };
                }
                return todo;
            });
            renderTodoList();
        }

        // 渲染待办事项列表
        function renderTodoList() {
            todoList.innerHTML = '';

            todos.forEach(todo => {
                const li = document.createElement('li');
                li.className = 'todo-item';

                const span = document.createElement('span');
                span.className = todo.completed ? 'todo-text completed' : 'todo-text';
                span.textContent = todo.text;
                span.addEventListener('click', () => toggleTodoStatus(todo.id));

                const button = document.createElement('button');
                button.className = 'delete-btn';
                button.innerHTML = '<i class="fa fa-trash"></i> 删除';
                button.addEventListener('click', () => deleteTodo(todo.id));

                li.appendChild(span);
                li.appendChild(button);
                todoList.appendChild(li);
            });
        }

        // 添加待办事项事件监听
        addTodoBtn.addEventListener('click', () => {
            const text = todoInput.value.trim();
            if (text) {
                createTodoItem(text);
                todoInput.value = ''; // 清空输入框
            }
        });

        // 回车键添加待办事项
        todoInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const text = todoInput.value.trim();
                if (text) {
                    createTodoItem(text);
                    todoInput.value = '';
                }
            }
        });

        // 初始化待办数量
        updateTodoCount();
    </script>
</body>
</html>